<template>
	<div class="loading_content">
		<!-- {{loadingType}} {{listLenght}} {{page}} -->
		<div class="loading" v-if="loadingType == 'loading'">
            <!-- <img src="" alt=""> -->
            <i class="iconfont icon-jiazai"></i>
		</div>
		<div class="no_more" v-if="page >= 1 && (listLenght< 10 && listLenght!==0) && loadingType !== 'loading'">
			<span class="line"></span>
			<p class="no_more_text">{{$t('qita.zanwugengduo')  }}</p>
			<span class="line"></span>
		</div>
		<div class="no_data" v-if="page == 1 && listLenght == 0 && loadingType !== 'loading'">
			<!-- <image src="/static/nodata.png" alt="" /> -->
			<!-- <image src="/static/nodata.png" mode=""></image> -->
            <i class="iconfont icon-meiyougengduo"></i>
			<p class="no_data_text">{{ $t('trade.meiyougeng') }}</p>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
	const props = defineProps({
		page: Number,
		listLenght:Number,
		loadingType:String
	})
    onMounted(()=>{
        // console.log("数据-----",page.value,listLenght.value,loadingType.value)
    })
</script>

<style scoped lang="less">
	.loading_content {
		width: 100%;
		height:50px;
		display: flex;
		align-items: center;
		justify-content: center;

		.loading {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
           
			.iconfont {
				font-size:16px;
                color:#f7d04c;
			}
		}

		.no_more {
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: center;

			.line {
				width: 25%;
				height: 0.5px;
				background: rgba(192, 196, 204, 0.7);
				display: inline-block;
			}

			.no_more_text {
				font-size: 12px;
				color: rgba(192, 196, 204, 0.7);
				margin: 0 20px;
			}
		}

		.no_data {
			width: 60%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.iconfont {
				font-size:40px;
                color: rgba(192, 196, 204, 0.7);
			}

			.no_data_text {
				font-size: 12px;
				color: rgba(192, 196, 204, 0.7);
				margin-top: 10px;
			}
		}
	}
</style>